//教程播放窗口：容器
import {connect} from 'react-redux';
import React from 'react';

import {
    closeCards,
    shrinkExpandCards,
    nextStep,
    prevStep,
    dragCard,
    startDrag,
    endDrag
} from '../reducers/cards';


import CardsComponent from '../components/cards/cards.jsx';

class Cards extends React.Component {
    render () {
        return (
            <CardsComponent {...this.props} />
        );
    }
}


const mapStateToProps = state => ({
    content: state.cards.content,
    step: state.cards.step,
    expanded: state.cards.expanded,
    x: state.cards.x,
    y: state.cards.y,
    dragging: state.cards.dragging
});

const mapDispatchToProps = dispatch => ({
    onCloseCards: () => dispatch(closeCards()),
    onShrinkExpandCards: () => dispatch(shrinkExpandCards()),
    onNextStep: () => dispatch(nextStep()),
    onPrevStep: () => dispatch(prevStep()),
    onDrag: (e_, data) => dispatch(dragCard(data.x, data.y)),
    onStartDrag: () => dispatch(startDrag()),
    onEndDrag: () => dispatch(endDrag())
});

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Cards);
